.home-page {
  position : relative
  width : 100%
  height : 100%
  &.active {
    .home-menu-left {
      width : 104px
      /*transition : width .1s*/
      .logo {
        i {
          margin inherit
        }
        img {
          width : 75%
        }
      }
    }
    .home-menu-right {
      left : 104px
      /*transition : left .1s*/
    }
    .home-nav {
      overflow visible !important
    }
  }
  .home-menu-left {
    position absolute
    top : 0
    left : 0
    height : 100%
    width : 240px;
    text-align : left;
    background : #393939;
    font-size : 14px
    /*transition : width .1s*/
    .logo {
      height : 60px
      line-height : 60px
      text-align : center
      i {
        font-size : 40px;
        color : #9399B0;
      }
      img {
        width : 100%
        padding : 0 10px
        vertical-align middle
      }
    }
    .take-back {
      height : 60px
      line-height : 60px
      text-align : center
      font-size : 16px
      color : #fff
      cursor : pointer
    }
    .home-nav {
      position : relative;
      height : calc(100% - 120px)
      .nav-title-icon {
        position : absolute
        left : 41px
        font-size : 20px
        color : #9399B0;
        + span {
          font-size : 16px
          color : #9399B0;
        }
      }
      .mini-menu {
        .mini-menu-item {
          position : relative
          height : 60px
          line-height : 60px
          font-size : 18px

          .nav-title-icon {
            color : #9399B0;
            font-size : 24px
          }
          &.active {
            color : #333333;
            background-color : #fff
            > .nav-mark {
              display : block
            }
            &.setting-page {
              cursor : pointer
              .title {
                background-color : #fff
                cursor : pointer
              }
            }
            .nav-title-icon {
              color : #333
            }
          }
          &:hover {
            color : #333333;
            background-color : #fff
            .mini-menu-list {
              display : block
              z-index 1
            }
            .nav-title-icon {
              color : #333333;
            }
            &.setting-page {
              cursor : pointer
              .title {
                color : #333333;
                background-color : #fff
                cursor : pointer
              }
            }
          }
          .mini-menu-list {
            display : none
            position absolute
            left : 104px
            width : 216px
            .title {
              height : 60px
              line-height : 60px
              padding-left : 40px
              background-color : #393939;
              font-size : 16px
              color : #9399B0;
              cursor default
            }
            li {
              position : relative
              height : 40px
              line-height : 40px
              padding-left : 40px
              font-size : 14px;
              color : #9399B0;
              background-color : #393939;
              cursor : pointer
              &:hover, &.active {
                background-color : #7f7f7f
                color : #333333;
              }
              &.active {
                .nav-mark {
                  display : block
                }
              }
            }
          }
        }
      }
      .nav-mark {
        display : none
        position : absolute
        top : 0
        left : 0
        bottom : 0
        width : 8px
        background-color : #4A96FF;
        + span {
          //color : #9399B0;
        }
      }
    }
  }
  .home-menu-right {
    position : absolute
    left : 240px
    right : 0
    height : 100%
    /*transition : left .1s*/
    .home-header {
      height : 60px
      line-height : 60px
      text-align : right
      background-color : #4c4c4c;
      font-size : 14px;
      color : #AFB4CC;
      .logout {
        display : inline-block
        width : 60px;
        margin-right : 40px
        text-align : center;
        font-size : 18px
        font-weight : 600
        cursor : pointer
      }
    }
    .home-content {
      position : relative
      height : calc(100% - 60px)
      background : #fff;
    }
  }
}
